<template>
  <view class="page-wrapper page-space">
    <view class="dict-item">
      <view class="dict-code">回显：</view>
      <view>{{ value }}：<lg-dict code="DataChangeTypeEnum" :value="value"/></view>
      <view class="dict-code">代码：</view>
      <view class="demo-code">
        &lt;lg-dict code="DataChangeTypeEnum" :value="value"/>
      </view>
    </view>
    <view class="dict-item">
      <view class="dict-code">选择：</view>
      <lg-dict code="DataChangeTypeEnum" v-slot="{ options }">
        <radio-group @change="radioChange">
          <label class="gl-flex" style="margin-bottom: 16rpx" v-for="item in options" :key="item.value">
            <radio :value="item.value" :checked="item.value === current" />
            <view>{{item.label}}</view>
          </label>
        </radio-group>
      </lg-dict>
    </view>
  </view>
</template>

<script setup lang="ts">
import "./index.css";
import {ref} from "vue";
import {randomElement} from "@/soar/utils/random";
import LgDict from "@/soar/components/lg-dict";

const current = ref();
function radioChange(e) {
  current.value = e.detail.value
}

const value = ref(0);
setInterval(() => {
  value.value = randomElement([0, 1, 2])
}, 1500)
</script>

<style lang="scss">
@import "../index.css";
</style>
